<template>
	<view>
		<image class="logo" :src="require('./images/logo.svg')"></image>
		<image class="welcome" :src="require('./images/welcome.svg')"></image>
		<view class="form">
			<div class="form-cell">
				<view class="form-para uni-flex align-center">
					<text class="form-title">手机号</text>
					<input @input="formInput($event,'accountname')" type="number" placeholder-class="input-placeholder" placeholder="请输入手机号码" maxlength="11" class="form-input">
				</view>
			</div>
			<div class="form-cell">
				<view class="form-para uni-flex align-center">
					<text class="form-title">密码</text>
					<input @input="formInput($event,'accountpwd')" type="password" placeholder-class="input-placeholder" placeholder="请输入密码" class="form-input">
				</view>
			</div>
			<div class="form-cell uni-flex justify-between">
				<view style="width: 64%;" class="form-para uni-flex align-center">
					<text class="form-title">验证码</text>
					<input @input="formInput($event,'logincode')" type="number" placeholder-class="input-placeholder" placeholder="请输入验证码" maxlength="4" class="form-input">
				</view>
				<image @click="getCode" class="code" :src="src" alt="">
			</div>
			<view class="error-tip">{{errorTip}}</view>
			<view class="login-btn" @click="login">登录</view>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl,phoneReg,decryptDes
	} from '../../common/util.js'
	export default {
		data() {
			return {
				errorTip:'',
				accountname:'',
				accountpwd:'',
				logincode: '',
				src: '',
			}
		},
		onLoad() {
			
		},
		methods: {
			formInput(event,prop){
				console.log(event,prop)
				this[prop]=event.detail.value
				if(prop=='accountname'&&phoneReg.test(this.accountname)){
					this.getCode()
				}
			},
			getCode(){
				uni.request({
					url: baseUrl + '/getlogincode',
					data: {
						phone:this.accountname
					},
					responseType: 'arraybuffer',
					success: (res) => {
						const arrayBuffer = new Uint8Array(res.data)
						const base64 = 'data:image/png;base64,' + uni.arrayBufferToBase64(arrayBuffer)
						this.src = base64
					},
				})
			},
			login() {
				console.log(1234)
				if(!this.accountname){
					this.errorTip='请输入手机号码'
					return
				}
				if(!phoneReg.test(this.accountname)){
					this.errorTip='手机号码格式错误'
					return
				}
				if(!this.accountpwd){
					this.errorTip='请输入密码'
					return
				}
				if(!this.logincode){
					this.errorTip='请输入验证码'
					return
				}
				if(!/\d{4}/.test(this.logincode)){
					this.errorTip='验证码格式错误'
					return
				}
				this.network=true
				this.$request.login({
					accountname: this.accountname,
					accountpwd: this.accountpwd,
					logincode: this.logincode
				}).then(res => {
					if (res.code == 0) {
						var token = res.token
						uni.setStorageSync('token', token)
						uni.navigateTo({
							url:'/pages/index/index'
						})
						// var app = getApp()
						// app.getUserInfo()
					} else {
						this.errorTip==res.msg
					}
					this.network=false
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		padding-top: 120rpx;
		background: url(https://xwstatic.sinontech.com/images/20220406/bc086e3b-41b6-4ac7-90cd-df739559b39c.jpeg);
		background-size: 100% auto;
	}

	.logo {
		width: 140rpx;
		height: 140rpx;
		margin: 0 auto;
	}

	.welcome {
		width: 224rpx;
		height: 134rpx;
		margin: 60rpx auto 0;
	}

	.form {
		padding: 0 60rpx;
		margin-top: 28rpx;
		.form-cell{
			margin-bottom: 36rpx;
			.form-para{
				height: 80rpx;
				line-height: 78rpx;
				border-bottom: 1PX solid #fff;
				.form-title{
					width: 176rpx;
					flex-shrink: 0;
					font-size: 30rpx;
					color: #B9C7FF;
					font-weight: bold;
				}
				.form-input{
					flex-grow: 1;
					color: #fff;
				}
				.input-placeholder{
					font-size: 24rpx;
					color: #fff;
					opacity: 0.7;
				}
			}
			.code{
				width: 210rpx;
				height: 78rpx;
			}
		}
		.error-tip{
			font-size: 24rpx;
			color: #D52100;
			text-align: center;
			height: 32rpx;
			line-height: 32rpx;
			margin-top: 85rpx;
			margin-bottom: 20rpx;
		}
		.login-btn{
			width: 630rpx;
			height: 80rpx;
			background: rgb(83, 116, 247);
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
			font-weight: bold;
			color: #fff;
			font-size: 32rpx;
		}
	}
</style>
